<template>
	<view class="set_up">
		<view class="set_up_box">
			<view class="set_up_li" >
				<view class="u_li_left">联系人</view>
				<view class="u_li_right">
					<input type="text" placeholder="输入联系名字" placeholder-class="placeholderClass" v-model="param.contactsPeople">
				</view>
			</view>
			<view class="set_up_li " >
				<view class="u_li_left">手机号码</view>
				<view class="u_li_right" >
					<input type="text" placeholder="输入手机号" placeholder-class="placeholderClass" v-model="param.phone">
				</view>
			</view>
			<view class="set_up_li" >
				<view class="u_li_left">地区信息</view>
				<view class="u_li_right" @click="open">
					<view class="area" :class="{'placeholderClass':param.regionalInformation == ''}">{{param.regionalInformation == ''?'选择区域':param.regionalInformation}}</view>
					<!-- <input @click="jo" type="text" placeholder="选择区域" placeholder-class="placeholderClass" :disabled="true"> -->
<!-- 					<view class="addressImg" @click="map">
						<image class="imgBox" src="/static/newsImg/address.png" ></image>
					</view> -->
				</view>
			</view>
			<view class="set_up_li set_up_li_u" >
				<view class="u_li_left">详细地址</view>
				<view class="u_li_right" >
					<textarea  auto-height placeholder="输入详细地址" placeholder-class="placeholderClass" v-model="param.locAddress"/>
					<!-- <input type="text" placeholder="输入详细地址" placeholder-class="placeholderClass"> -->
				</view>
			</view>
		</view>
<!-- 		<view class="switchClass">
			<switch :checked="param.status == 2" color="#1D46ED" style="transform:scale(0.7)" @change="switch1Change"/>
		</view> -->
		
		<view  class="address_footer" >
			<view class="address_add C_A8A8A8"  v-if="param.contactsPeople == '' || param.phone == '' || param.regionalInformation == '' || param.locAddress == ''">
				<text>保存</text>
			</view>
			<view class="address_add" @click="addAddressData" v-else>
				<text>保存</text>
			</view>
		</view>
          <cityPicker  :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible" />
	</view>
</template>

<script>
    import jweixin from '@/components/jweixin-module/index'
    import wechat from '@/components/jweixin-module/wechat'
	import cityPicker from '@/components/piaoyi-cityPicker/pioayi-cityPicker.vue'
    import { addAddress,getInfoAddress,editAddress,getCommonCity } from '@/api/api-v1-2.js'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				saveStatus:true,
				statusMap:true,
				param:{
				   contactsPeople:'', //联系人
				   phone:'', // 电话号码
				   regionalInformation:'', //地区信息	
				   locAddress:'', //详细地址
				   // status:1
				   
				},
				cityDataList:[],
				visible: false,
				maskCloseAble: true, //点击模拟框是否关闭
				defaultValue: '' ,//初始化参数
				isAdd:true  ,//是否是编辑
				shopId:''
			}
		},
		onLoad(e) {
			if(e.id != undefined){
				this.getInfoAddress(e.id)
				this.isAdd = false
			}else{
				this.isAdd = true
			}
			if(e.shopId != undefined){
			    this.shopId = e.shopId
			}

		},
		methods: {
				// switch1Change: function (e) {
				// 	// console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				// 	if(e.detail.value){
				// 		this.param.status = 2
				// 	}else{
				// 		this.param.status = 1
				// 	}
				// },
			async getInfoAddress(id){
			    var res = await	getInfoAddress(id)
				this.param.id = res.result.id
				this.param.contactsPeople = res.result.contactsPeople
				this.param.phone = res.result.phone
				this.param.regionalInformation = res.result.regionalInformation
				this.param.locAddress = res.result.locAddress
			},
			open () {
				this.visible = true
			},
			confirm (val) {
				this.param.regionalInformation = val.label
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
			addAddressData(){
				var data = this.param
				if(data.contactsPeople === '') {uni.showToast({title: '输入联系名字',icon:'none' }); return false;}
				else if(data.phone === '') {uni.showToast({title: '请输入手机号',icon:'none' }); return false;}
				else if(data.regionalInformation === '') {uni.showToast({title: '请选择区域',icon:'none' }); return false;}
				else if(data.locAddress === '') {uni.showToast({title: '请输入详细地址',icon:'none' }); return false;}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				if(this.isAdd){
					this.addAddress(data)
				}else{
					this.editAddress(data)
				}
			},
			async addAddress(param){
				try{
					var res = await addAddress(param)
						this.$queue.showToast('添加成功')
						setTimeout(()=>{
							this.jumpLink()
						},1000)
						uni.hideLoading()
				}catch {
					  uni.hideLoading()
				}
			},
			async editAddress(param){
				try{
				var res = await editAddress(param)
						this.$queue.showToast('修改成功')
						setTimeout(()=>{
							this.jumpLink()
						},1000)
						uni.hideLoading()
				}catch {
					  uni.hideLoading()
				}
			},
			jumpLink(){
				if(this.shopId != ''){
					uni.$emit('updateAddressData')
					uni.navigateBack({
						delta: 1
					})
				}else{
					uni.redirectTo({
						url:'/pages/my/set-up/my-address/my-address'
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F8FBFF;
	}

/* 	.top_radius {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.button_radius {
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	} */

	.set_up {
		padding-top: 40rpx;
	}
	.set_up_box{
		border-radius:16rpx;
		overflow: hidden;
		width: 686rpx;
		margin: 0 auto;
	}
	.set_up_li {
		width: 100%;
		background: #fff;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* align-items: center; */
		border-bottom: 1rpx solid #EDEDED;
		color: #000000;

	}
	.set_up_li_u{
		border-bottom: unset !important;
	}
	.switchClass{
		width: 686rpx;
		margin: 32rpx auto;
	}
	.set_up_li .u_li_left {
		font-size: 28rpx;
		color: #000000;
	}
	.u_li_right{
		width: 75%;
		display: inline-flex;
		flex-direction: row;
	}
	.u_li_right input,.u_li_right textarea{
		width: 100%;
		font-size: 30rpx;
		text-align: end;
	}
	.placeholderClass{
		font-size: 30rpx;
		color: #CBCBCB;
	}
	.area{
		width: 100%;
		text-align: end;
	}
	.addressImg{
		width: 40rpx;
		height: 40rpx;
		margin-left: 28rpx;
	}
	.addressImg image{
		width: 40rpx;
		height: 40rpx;
	}
	.address_footer{
	    display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 100rpx;
	}
	.address_add{
		padding: 16rpx 66rpx;
		border-radius: 8rpx;
		font-size: 34rpx;
		border: 2rpx solid #0B87F2;
		color: #1053FF;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.C_A8A8A8{
		border: 2rpx solid #A8A8A8;
		color: #A8A8A8;
	}
</style>
